<template>

  <van-nav-bar
      v-if="route.meta.showHeader"
      :title="title"
      :left-arrow="route.meta.showBack"
      @click-left="onClickLeft"
      @click-right="onClickRight"
  >
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>
  <van-notice-bar v-if="route.meta.showPop" scrollable color="#1989fa" background="#ecf9ff" left-icon="volume-o">
    病友交流室：在这里寻找适灵魂病友，不过是些许风霜罢了,记得要遵纪守法，最后欢迎大家提出意见和反馈
  </van-notice-bar>
  <div id="content">
    <router-view/>
  </div>

<!--  <van-tabbar route @change="onChange">-->
    <van-tabbar route  v-if="route.meta.showBottom"  active-color="#ee0a24">
    <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item to="/team" icon="search" name="team">队伍</van-tabbar-item>
    <van-tabbar-item to="/friend" icon="friends-o" name="friend">好友</van-tabbar-item>
    <van-tabbar-item to="/user" icon="user-o" name="user">个人</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">

import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import routes from "../config/router";


const router=useRouter()
const route=useRoute()
const DEFAULT_TITLE='伙伴匹配';
const title=ref(DEFAULT_TITLE);

/**
 * 根据路由切换标题
 */
router.beforeEach((to,from)=>{
  const toPath=to.path;
  const route=routes.find((route)=>{
    return toPath == route.path;
  })
  title.value=route?.title??DEFAULT_TITLE;
})

const onClickLeft = () => {
  router.back()
};
const onClickRight = () => {
  router.push('/search')
};
</script>

<style scoped>
#content{
  padding-bottom: 50px;
}
</style>